在 Webpack 4 中全局包含额外的 jQuery 插件
Including additional jQuery plugins globally with Webpack 4
我正在尝试使用 Webpack 4 使 jQuery 插件可访问内联 JavaScript。
我正在使用 PluginProvider
使 jQuery 可用于我的网站:
plugins: [
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery"
}),
],
这工作正常,我可以从包含我的包的任何页面访问 jQuery。
我试图通过创建一个名为 vendor.js
的包来添加 bootstrap-datepicker,其中包含以下内容:
import 'bootstrap-datepicker';
我可以从 vendor.js
包中调用 $('input').datepicker()
,但是如果我尝试使用内联 <script>
调用它,我会得到:
Uncaught TypeError: $(...).datepicker is not a function
如何配置 Webpack 4 使 bootstrap-datepicker
可用于全局范围?
更新
我已经在此处上传了演示此问题的源代码:https://github.com/LondonAppDev/webpack-global-jquery-issue
看来问题是第二个捆绑包导入正在重新添加 jQuery 而没有 datpicker 附加组件。有解决办法吗?
我已经处理过几轮此类问题,并且在 expose-loader 上取得了最大的成功。在您的 webpack 配置中,您应该使用以下公开加载程序配置为 jQuery 设置一个部分:
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
}, {
loader: 'expose-loader',
options: '$'
}]
},
这里有一个类似的 SO 帖子:
(他们的正则表达式模式对我不起作用)
使用 Webpack 将 jQuery 暴露给真正的 Window 对象
Webpack 2 加载、公开和捆绑 jquery 和 bootstrap
您应该可以找到其他几个 articles/posts 使用此配置的配置,这是迄今为止我唯一能够成功开始工作的配置。
另外值得注意的是,bootstrap 4 似乎也在内部加载或对 jQuery 执行要求,因此如果您在 jQuery [=32= 之后包含导入或要求] 和插件,它将重新初始化 jQuery 并导致您的插件失去作用域。
我正在尝试使用 Webpack 4 使 jQuery 插件可访问内联 JavaScript。
我正在使用 PluginProvider
使 jQuery 可用于我的网站:
plugins: [
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery"
}),
],
这工作正常,我可以从包含我的包的任何页面访问 jQuery。
我试图通过创建一个名为 vendor.js
的包来添加 bootstrap-datepicker,其中包含以下内容:
import 'bootstrap-datepicker';
我可以从 vendor.js
包中调用 $('input').datepicker()
,但是如果我尝试使用内联 <script>
调用它,我会得到:
Uncaught TypeError: $(...).datepicker is not a function
如何配置 Webpack 4 使 bootstrap-datepicker
可用于全局范围?
更新
我已经在此处上传了演示此问题的源代码:https://github.com/LondonAppDev/webpack-global-jquery-issue
看来问题是第二个捆绑包导入正在重新添加 jQuery 而没有 datpicker 附加组件。有解决办法吗?
我已经处理过几轮此类问题,并且在 expose-loader 上取得了最大的成功。在您的 webpack 配置中,您应该使用以下公开加载程序配置为 jQuery 设置一个部分:
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
}, {
loader: 'expose-loader',
options: '$'
}]
},
这里有一个类似的 SO 帖子:
使用 Webpack 将 jQuery 暴露给真正的 Window 对象
Webpack 2 加载、公开和捆绑 jquery 和 bootstrap
您应该可以找到其他几个 articles/posts 使用此配置的配置,这是迄今为止我唯一能够成功开始工作的配置。
另外值得注意的是,bootstrap 4 似乎也在内部加载或对 jQuery 执行要求,因此如果您在 jQuery [=32= 之后包含导入或要求] 和插件,它将重新初始化 jQuery 并导致您的插件失去作用域。